<template>
  <div class="table-container">
    <el-table :data="tableData" style="width: 100%">
      <!-- 年度各单位科技成果实时统计 -->
      <el-table-column align="center" label="年度各单位科技成果实时统计">
        <template slot="header" slot-scope="scope">
          <div style="display: flex; justify-content: center; align-items: center;">
            <span style="margin-right: 10px;">年度各单位科技成果实时统计</span>
            <el-select v-model="selectedYear" placeholder="请选择年份" @change="loadData">
              <el-option
                v-for="year in years"
                :key="year"
                :label="year"
                :value="year"
              ></el-option>
            </el-select>
          </div>
        </template>

        <!-- 单位 -->
        <el-table-column prop="unit" label="单位" align="center"></el-table-column>

        <!-- 知识产权 -->
        <el-table-column label="知识产权" align="center">
          <el-table-column prop="inventionPatent" label="发明专利" align="center"></el-table-column>
          <el-table-column prop="utilityPatent" label="实用专利" align="center"></el-table-column>
          <el-table-column prop="designPatent" label="外观专利" align="center"></el-table-column>
          <el-table-column prop="trademark" label="商标" align="center"></el-table-column>
          <el-table-column prop="softwareCopyright" label="软件著作权" align="center"></el-table-column>
        </el-table-column>

        <!-- 工法颁布 -->
        <el-table-column label="工法颁布" align="center">
          <el-table-column prop="provincialLevelAward" label="省部级工法" align="center"></el-table-column>
          <el-table-column prop="enterpriseLevelAward" label="企业工法" align="center"></el-table-column>
        </el-table-column>

        <!-- 科技进步奖 -->
        <el-table-column label="科技进步奖" align="center">
          <el-table-column prop="companyLevelAward" label="公司科技奖" align="center"></el-table-column>
          <el-table-column prop="constructionLevelAward" label="电建科技奖" align="center"></el-table-column>
          <el-table-column prop="provincialLevelProject" label="省部级科技奖" align="center"></el-table-column>
        </el-table-column>

        <!-- 立项数 -->
        <el-table-column label="立项数" align="center">
          <el-table-column prop="companyLevelProject" label="公司立项" align="center"></el-table-column>
          <el-table-column prop="branchLevelProject" label="分公司立项" align="center"></el-table-column>
        </el-table-column>

        <!-- 截止当前归集发生额 -->
        <el-table-column prop="totalAmount" label="截止当前归集发生额（万元）" align="center"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedYear: '2025', // 默认选中2025年
      tableData: [], // 表格数据
      years: [2025, 2024, 2023], // 可选年份数组
    };
  },
  methods: {
    loadData(year) {
      // 根据选择的年份加载数据
      this.selectedYear = year;
      // 这里应该调用一个方法从服务器获取数据，这里仅做模拟
      if (year === '2025') {
        this.tableData = [
          { unit: '技术中心', inventionPatent: 1212, utilityPatent: 214, designPatent: 21312, trademark: 0, softwareCopyright: 0, provincialLevelAward: 0, enterpriseLevelAward: 0, companyLevelAward: 0, constructionLevelAward: 0, provincialLevelProject: 0, companyLevelProject: 0, branchLevelProject: 0, totalAmount: 0 },
          { unit: '第一工程公司', inventionPatent: 213, utilityPatent: 213, designPatent: 213, trademark: 0, softwareCopyright: 0, provincialLevelAward: 14, enterpriseLevelAward: 0, companyLevelAward: 0, constructionLevelAward: 0, provincialLevelProject: 0, companyLevelProject: 0, branchLevelProject: 1, totalAmount: 1 },
          // 其他数据...
        ];
      } else if (year === '2024') {
        // 加载2024年的数据
      } else if (year === '2023') {
        // 加载2023年的数据
      }
    },
  },
  mounted() {
    // 页面加载时自动加载默认年份的数据
    this.loadData(this.selectedYear);
  }
};
</script>

<style scoped>
.table-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  width: 100%;
}

/* 确保下拉菜单和标题在同一行 */
.el-table .cell {
  display: flex;
  align-items: center; /* 垂直居中 */
}
</style>
